<template>
  <div style="padding: 10px;width: 800px">
    <el-card>
      <div style="display:flex;">
        <div style="width: 300px;">
          <el-image :src="goods.img" :preview-src-list="[goods.img]" style="width: 100%;"></el-image>
        </div>
        <div style="flex: 1;padding-left: 50px">
          <div style="padding: 8px"><h3>{{ goods.name }}</h3></div>
          <div class="item1">{{ goods.introduction }}</div>
          <div class="item1">价格：<span style="color: orangered;font-size: 18px">￥{{ goods.price }}</span></div>
          <div class="item1" style="font-size: 14px">剩余库存：{{ goods.store }}</div>
          <div class="item1">
            <el-input-number v-model="form.num" @change="handleChange" :min="1" :max="100"
                             label="描述文字"></el-input-number>
            <span style="margin-left: 10px">{{ goods.unit }}</span>
          </div>
          <div style="margin-top: 12px">
            <el-button size="medium" style="color: white;background-color: orangered"><i class="el-icon-shopping-bag-1"></i> 直接购买</el-button>
            <el-button size="medium" style="color: white;background-color: orangered" @click="addCart"><i class="el-icon-shopping-cart-2"></i> 加入购物车</el-button>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "GoodsDetail",
  data() {
    return {
      id: this.$route.query.id,
      goods: {},
      form: { num: 1,},
      user:localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {}
    }
  },
  created() {
    this.load()
  },
  methods: {
    load() {
      this.request.get("/goods/" + this.id).then(res => {
        this.goods = res.data
      })
    },
    handleChange(value) {
      console.log(value);
    },
    addCart(){
      if (!this.user.userName){
        this.$message.error("请登录后再操作！")
        this.$router.push("/login")
        return
      }
      this.form.goodsId = this.goods.id
      this.request.post("/carts",this.form).then(res => {
        if (res.code === 200){
          this.$message.success("成功加入购物车")
        }else {
          this.$message.error(res.message)
        }
      })
    }
  }
}
</script>

<style scoped>
.item1 {
  padding: 8px;
  color: #666;
  font-size: 14px;
}
</style>